<template>
  <div class="md-dict-tag-business" v-loading="loading">
    <el-tag v-for="item in tags" :key="item[props.value]" :type="item.listClass || 'primary'" size="small" style="margin-right: 5px;">{{item[props.label]}}</el-tag>
  </div>
</template>

<script>
export default {
  name: 'MdDictTagBusinessComponent',
  props: {
    value: [Number, String, Array],
    /**
     * 自定义选项 value,label
     */
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 是否多个标签
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
    * 配置选项
    */
    props: {
      type: Object,
      default: () => {
        return { label: 'dictLabel', value: 'dictValue' }
      }
    }
  },
  data () {
    return {
      loading: false,
      list: this.options,
      tags: [],
      val: null
    }
  },
  watch: {
    options: {
      handler (val) {
        this.list = val
        this.handleRenderLabel(this.value)
      },
      deep: true,
      immediate: true
    },
    value: {
      handler (val) {
        this.val = val
        this.list = this.options
        this.handleRenderLabel(val)
      }
    }
  },
  mounted () {
    this.list = this.options
    this.handleRenderLabel(this.value)
  },
  methods: {
    handleRenderLabel (val) {
      this.tags = []

      if (this.multiple) {
        const infos = this.list.filter(e => val.map(m => { return `${m}` }).includes(`${e[this.props.value]}`))
        if (infos) {
          this.tags = infos
        }
      } else {
        const info = this.list.find(e => `${e[this.props.value]}` === `${val}`)
        if (info) {
          this.tags.push(info)
        }
      }
    }
  }
}
</script>